import { View, Text, Block, Input, Image, ScrollView } from '@tarojs/components';
import { BaseComponent } from '@common/components/base-component';
import IQRequest from '@common/iq-request/request'
import { AtActionSheet, AtTabsPane, AtTabs, AtActionSheetItem } from "taro-ui"
import selectedImg from '../../assets/img/y-agree.png'
import style from './index.module.scss'
import clear from '../../assets/img/clear.png'
// import "taro-ui/dist/style/components/tabs.scss";
import "taro-ui/dist/style/components/action-sheet.scss";
import './picker.scss'


interface CProps {
    selectMedia?: boolean,
    close: Function,
    title?: string,
    level?: number,
    getselectCode: Function
}
interface CState {
    clicked: string
    sClicked: string
    current: number
    tabList: any
    isClick: string
    originalList: any
    cityList: any
    province: any
    provinceName: string
    cityName: string
}
export default class PickerAddress extends BaseComponent<CProps, CState> {
    constructor(props) {
        super(props);
        this.state = {
            clicked: '',
            isClick: '',
            sClicked: '',
            cityName:'',
            province: [],
            tabList: [{ title: '请选择' }],
            current: 0,
            cityList: [],
            originalList: [],
            provinceName: ''
        }
    }
    async componentDidMount() {
        const province = await IQRequest.handleOrigin(0)
        this.setState({
            province
        })
    }
    render() {
        const { selectMedia, title } = this.props
        const { cityList, province, current, originalList } = this.state
        const closeSelect = (item) => {
            this.props.close(item)
        }
        const handleTabClick = (e) => {
            // console.log('index-', e);
            // this.setState({
            //     current: 1,
            // })

            this.setState({
                current: e,
            })
        }
        const handleTClickItem = async (item, index) => {
            if (index == 0) {
                this.setState({
                    clicked: item.code,
                    provinceName:item.name
                })
                console.log(item.name, '一级菜单name----------------')
                this.state.tabList[0].title = item.name
                this.state.tabList.length = 1
                this.state.tabList.push({ title: '请选择' })
                this.setState({
                    current: 1
                })
                const cityList = await IQRequest.handleOrigin(item.code)
                this.setState({
                    cityList
                })
            }
            if (index == 1) {
                this.setState({
                    sClicked: item.code,
                    cityName:item.name
                })
                this.state.tabList[1].title = item.name
                const originalList = await IQRequest.handleOrigin(item.code)
                this.setState({
                    originalList
                })
                console.log(item.code,'常驻位置code')
                this.props.getselectCode(item.code,`${this.state.provinceName}${this.state.cityName}`)
                if (this.props.level === 2 || !originalList) {
                    this.props.close()
                }
            }
            if (index == 2) {
                this.setState({
                    isClick: item.code,
                    current: 2
                })
                this.state.tabList[2].title = item.name
                this.props.close()
            }
        }
        return (
            <View className={style.boxx}>
                {/* <ScrollView enhanced={true} scrollY={true} style={{height:'800rpx'}} className={style.boxx}> */}
                <View className="actionBox">
                    <AtActionSheet isOpened={selectMedia}>
                        <View className={style.text}>{title || '选择平台'}
                            <Image onClick={closeSelect} className={style.clear} src={clear}></Image>
                        </View>
                        <AtTabs current={this.state.current} tabList={this.state.tabList} onClick={handleTabClick}>
                            {
                                this.state.tabList.map((item, index) => {
                                    return (
                                        <>
                                            {
                                                current === 0 &&
                                                <AtTabsPane current={0} index={0} >
                                                    {Array.isArray(province) &&
                                                        province.map((item, keys) => {
                                                            return (
                                                                <AtActionSheetItem key={keys} onClick={() => { handleTClickItem(item, 0) }}>
                                                                    <View className={style.picker}>
                                                                        {
                                                                            item.code === this.state.clicked ?
                                                                                <><Image src={selectedImg}></Image><Text style="font-weight:600">{item.name}</Text></> :
                                                                                <><Text>{item.name}</Text></>
                                                                        }
                                                                    </View>
                                                                </AtActionSheetItem>
                                                            )
                                                        })
                                                    }
                                                </AtTabsPane>
                                            }

                                            {
                                                current === 1 && <AtTabsPane current={1} index={1} >
                                                    {Array.isArray(cityList) &&
                                                        cityList.map((item, keys) => {
                                                            return (
                                                                <AtActionSheetItem key={keys} onClick={() => { handleTClickItem(item, 1) }}>
                                                                    <View className={style.picker}>
                                                                        {
                                                                            item.code === this.state.sClicked ?
                                                                                <><Image src={selectedImg}></Image><Text style="font-weight:600">{item.name}</Text></> :
                                                                                <><Text>{item.name}</Text></>
                                                                        }
                                                                    </View>
                                                                </AtActionSheetItem>
                                                            )
                                                        })
                                                    }
                                                </AtTabsPane>
                                            }
                                            {
                                                current === 2 && <AtTabsPane current={2} index={2} >
                                                    {Array.isArray(originalList) &&
                                                        originalList.map((item, keys) => {
                                                            return (
                                                                <AtActionSheetItem key={keys} onClick={() => { handleTClickItem(item, 2) }}>
                                                                    <View className={style.picker}>
                                                                        {
                                                                            item.code === this.state.isClick ?
                                                                                <><Image src={selectedImg}></Image><Text style="font-weight:600">{item.name}</Text></> :
                                                                                <><Text>{item.name}</Text></>
                                                                        }
                                                                    </View>
                                                                </AtActionSheetItem>
                                                            )
                                                        })
                                                    }
                                                </AtTabsPane>
                                            }
                                        </>
                                    )
                                })
                            }

                        </AtTabs>
                        {/* {
                            this.state.originList.map(item => {
                                return (
                                    <AtActionSheetItem key={item} onClick={() => { this.handleClickItem(item) }}>
                                        <View className={style.picker}>
                                            <Image src={selectedImg}></Image>
                                            {item.name}
                                        </View>
                                    </AtActionSheetItem>
                                )
                            })
                        } */}
                    </AtActionSheet>
                </View>
                {/* </ScrollView> */}
            </View>
        )
    }
}
